<!doctype html>
<html lang="en-US">
    <head>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap2.css" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/jsp;charset=utf-8">
        <title>Login</title>
        <link rel="stylesheet" type="text/css" media="all" href="style.css">
         <link rel="stylesheet" type="text/css" media="all" href="theme.css">
         <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
         
         <link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
         <link href="css/cuatui.css" rel="stylesheet" type="text/css"/>
         <link href="css/docs.css" rel="stylesheet" type="text/css"/>
         <link href="css/prettify.css" rel="stylesheet" type="text/css"/>
         <link href="css/bootstrap-combined.min.css" rel="stylesheet" type="text/css"/>
         <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
         <script src="js/bootstrap-dropdown.js" type="text/javascript"></script>
         <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery.leanModal.min.js"></script>
       
        <style type="text/css">
            html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
        </style>
        <script type="text/javascript"
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBclx6LdcXCypAFVosOxU_05CGFuUw9AGI">
        </script>
        
          <link rel="stylesheet" type="text/css" media="all" href="cuatui.css">
        <link href="css/cuatui.css" rel="stylesheet" type="text/css"/>
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    </head>

    <body>
        
        <script src="js/prettify.js" type="text/javascript"></script>
   <script src="js/bootstrap.min.js"></script>
         <link rel="stylesheet" type="text/css" media="all" href="style.css">
        <script src="js/cuatui.js" type="text/javascript"></script>
        <script src="js/analytics.js" type="text/javascript"></script>
        <script src="js/widgets.js" type="text/javascript"></script>
        <script src="js/bootstrap-dropdown.js" type="text/javascript"></script>
       <script src="js/jquery.js" type="text/javascript"></script>
      
       <div>
           <center><a  data-toggle="modal" href="#myModal" class="btnLogin flatbtn btn-lg " id="modaltriggerlogin"  >Login</a></center>
       </div>
       <li class="dropdown">
                      <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                      </ul>
                    </li>
       <div id="map-canvas"></div>
       
		<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
               Log in
            </h4>
         </div>
         <div class="modal-body">
          <form class="form col-md-12" >

              <input name="email" value="dmdmfms" class="form-control input-lg" placeholder="Email" required="" type="text"> 
            <input name="pass" value="fghjk"class="form-control input-lg" placeholder="Password" required="" type="password"> 
            <label class="checkbox">
                <input   type="checkbox" value="remember-me"> 
            </label>
             <div id="ketqua"></div>
            <button id="btnsign"  class="btn btn-primary btn-lg btn-block">Sign In</button>
            <script>
                  $(document).ready(function() {                        // When the HTML DOM is ready loading, then execute the following function...
                $('#btnsign').click(function() {               // Locate HTML DOM element with ID "somebutton" and assign the following function to its "click" event...
                    
                    $.get('jsonservlet', function(responseText) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
                        
                        $('#ketqua').text(responseText);         // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
                    });
                });
            });
                    </script>          
          </form>
</div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">Close
            </button>
            <button type="button" class="btn btn-primary">
               Login
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
		
            
          

        
  
    </body>
</html>